---
name: Collector
route: /collector
menu: Utilities
---

import { Playground, Props } from 'docz';
import Collector from '../index';

# Collector

Used as the glue for all motion components,
every motion component will use this internally to pass the data to the parent [Motion](/motion).
See [Custom motions](/custom-motions) for help.

> **Tip -** See [Custom motions](/custom-motions) for more information on how to use this component.

## Usage

```js
import Motion, { Collector } from '@element-motion/core';

const CustomMotion = ({ children }) => {
  const beforeMotion = () => {};
  const animate = () => {};
  const afterAnimate = () => {};

  return (
    <Collector
      data={{
        action: 'motion',
        payload: {
          beforeAnimate,
          animate,
          afterAnimate,
        },
      }}
    >
      {children}
    </Collector>
  );
};

const ListItem = ({ index }) => (
  <Motion name={`item-${index}`}>
    <CustomMotion>
      {({ ref, style, className }) => <div ref={ref} style={style} className={className} />}
    </CustomMotion>
  </Motion>
);
```

## Props

<Props of={Collector} />
